<template>
	<view class="outbox">
		<!-- 标题栏 -->
		<view class="title">
			<view @click="back" class="icon"
				style="display: flex;align-items: center;justify-content: center;color: #fff;">
				<image src="../../static/user/back.svg"></image>
				<text>返回</text>
			</view>
			<view style="color: #fff;display: flex;align-items: center;justify-content: center;">
				消息通知
			</view>
		</view>
		<!-- 消息类型 -->
		<view class="noticeType">
			<view class="noticeItem" @click="changeNoticeType(0)" :class="state.noticeType==0?'textColor':''">
				全部通知
				<view class="readNum" v-if="state.readStateList[0]>0">
					{{state.readStateList[0]<100?state.readStateList[0]:'99+'}}
				</view>
			</view>
			<view class="noticeItem" @click="changeNoticeType(1)" :class="state.noticeType==1?'textColor':''">
				用户消息
				<view class="readNum" v-if="state.readStateList[1]>0">
					{{state.readStateList[1]<100?state.readStateList[1]:'99+'}}
				</view>
			</view>
			<view class="noticeItem" @click="changeNoticeType(2)" :class="state.noticeType==2?'textColor':''">
				系统通知
				<view class="readNum" v-if="state.readStateList[2]>0">
					{{state.readStateList[2]<100?state.readStateList[2]:'99+'}}
				</view>
			</view>
			<view class="itembar0" :class="`itembar${state.noticeType}`"></view>
		</view>
		<!-- 消息内容 -->
		<view class="content">
			<view v-if="state.noticeType==0" class="contentItem" @touchmove="getItemIndex(index)"
				:class="state.moveSIndex==index?'moveleft':''" @touchstart="itemMoveStart" @touchend="itemMoveEnd"
				@click="goDetail(item)" v-for="(item,index) in state.dataList" :key="item">
				<view class="itemTitle">
					{{item.type==0?'用户绑定申请':'系统通知'}}
				</view>
				<view class="text">
					{{item.msg}}
				</view>
				<view class="readState" v-if="item.readState==0"></view>
				<view class="deleteBtn" @click.stop="deleteItem(item)">
					删除
				</view>
			</view>
			<view v-if="state.noticeType==1" class="contentItem" @click="goDetail(item)" v-for="item in state.userList"
				:key="item">
				<view class="itemTitle">
					用户绑定申请
				</view>
				<view class="text">
					{{item.msg}}
				</view>
				<view class="readState" v-if="item.readState==0"></view>
			</view>
			<view v-if="state.noticeType==2" class="contentItem" @click="goDetail(item)"
				v-for="item in state.systemList" :key="item">
				<view class="itemTitle">
					系统通知
				</view>
				<view class="text">
					{{item.msg}}
				</view>
				<view class="readState" v-if="item.readState==0"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,onUnload
	} from '@dcloudio/uni-app';
	import {
		onMounted,
		reactive
	} from "vue";
	const state = reactive({
		noticeType: 0,
		userInfo: {},
		dataList: [],
		userList: [],
		systemList: [],
		readStateList: [0, 0, 0],
		token: '',
		moveStartX: 0,
		moveIndex: -1,
		moveSIndex: -1
	})
	// 生命周期
	onLoad((e) => {
		let userInfo = JSON.parse(e.obj);
		// console.log(userInfo)
		state.userInfo = userInfo;
		// 获取token
		getToken()
	})
	onUnload(()=>{
		uni.closeSocket({
			success: () => {
			}
		})
	})
	// 获取token
	const getToken = () => {
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				state.token = res.data
				// 建立websocket链接
				buildWebsocket()
			}
		})
	}
	// 建立websocket
	const buildWebsocket = () => {
		uni.connectSocket({
			url: `http://124.221.162.230:8888/websocket/${state.userInfo.id}`,
			method: 'POST',
			header: {
				Authorization: state.token
			},
			success: (res) => {
				listenWebsocket()
			},
			fail: (err) => {
				console.log(err)
			}
		})
	}
	// 监听websocket打开事件
	const listenWebsocket = () => {
		uni.onSocketOpen((res) => {
			listenWebsocketData()
		})
		uni.onSocketClose((err) => {
			console.log(err)
		})
	}
	// 监听websocket返回数据事件
	const listenWebsocketData = () => {
		// console.log(258)
		uni.onSocketMessage((res) => {
			// console.log(JSON.parse(res.data))
			let data = state.dataList;
			data.push(JSON.parse(res.data));
			state.dataList = data;
			// 分类两种类型的消息通知
			sortNoticType(data);
		})
	}
	// 分类消息
	const sortNoticType = (arr) => {
		let arr1 = [];
		let arr2 = [];
		let numArr = [0, 0, 0]
		for (let i = 0; i < arr.length; i++) {
			if (arr[i].type == 0) {
				arr1.push(arr[i]);
				if (arr[i].readState == 0) {
					numArr[0] = numArr[0] + 1;
					numArr[1] = numArr[1] + 1;
				}
			} else {
				arr2.push(arr[i]);
				if (arr[i].readState == 0) {
					numArr[0] = numArr[0] + 1;
					numArr[2] = numArr[2] + 1;
				}
			}
		}
		state.userList = arr1;
		state.systemList = arr2;
		state.readStateList = numArr;
	}
	// 返回上一页
	const back = () => {
		uni.closeSocket({
			success: () => {
				uni.navigateBack()
			}
		})
	}
	// 切换通知类型
	const changeNoticeType = (id) => {
		state.noticeType = id;
	}
	// 去到消息详情页
	const goDetail = (obj) => {
		// console.log(state.dataList)
		if (obj.readState == 0) {
			uni.request({
				url: 'http://124.221.162.230:8888/sysMsg/updateMsg',
				method: 'POST',
				header: {
					Authorization: state.token
				},
				data: {
					msgId: obj.msgId,
					readState: 1,
					type: obj.type
				},
				success: (res) => {
					if (res.data.msg == 'success') {
						let arr = state.dataList;
						for (let i = 0; i < arr.length; i++) {
							if (arr[i].msgId == obj.msgId) {
								arr[i].readState = 1;
								break;
							}
						}
						state.dataList = arr;
						sortNoticType(arr)
						let ss = JSON.stringify(obj);
						uni.navigateTo({
							url: `/pages/emailDetail/emailDetail?obj=${ss}`
						})
					}
				}
			})
		} else {
			let ss = JSON.stringify(obj);
			uni.navigateTo({
				url: `/pages/emailDetail/emailDetail?obj=${ss}`
			})
		}
	}
	// 手指滑动开始
	const itemMoveStart = (e) => {
		// console.log(e.changedTouches[0].pageX)
		state.moveStartX = e.changedTouches[0].pageX;
	}
	// 手指滑动结束
	const itemMoveEnd = (e) => {
		// console.log(e.changedTouches[0].pageX)
		if (state.moveStartX - e.changedTouches[0].pageX > 50) {
			state.moveSIndex = state.moveIndex;
		} else if (e.changedTouches[0].pageX - state.moveStartX > 30) {
			state.moveSIndex = -1;
		}
	}
	// 手指滑动获取下标
	const getItemIndex = (index) => {
		state.moveIndex = index
	}
	// 删除信息通知
	const deleteItem = (obj) => {
		uni.request({
			url: 'http://124.221.162.230:8888/sysMsg/deleteMsgById',
			method: 'POST',
			header: {
				Authorization: state.token
			},
			data: {
				msgId: obj.msgId
			},
			success: (res) => {
				let arr = state.dataList;
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].msgId == obj.msgId) {
						arr.splice(i, 1);
						break;
					}
				}
				state.dataList = arr;
				sortNoticType(arr)
				state.moveStartX = 0;
				state.moveIndex = -1;
				state.moveSIndex = -1;
			}
		})
	}
</script>

<style lang="less" scoped>
	.outbox {
		width: 100vw;
		height: 100vh;
		background-color: #F4F4F6;

		.title {
			width: 100%;
			height: 160rpx;
			padding-top: var(--status-bar-height);
			background-color: #2A65A7;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: 1fr 2fr 1fr;

			.icon {
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.noticeType {
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			color: rgb(153, 153, 153);
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			position: relative;

			.noticeItem {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				position: relative;

				.readNum {
					position: absolute;
					top: 30rpx;
					right: 16rpx;
					width: 40rpx;
					height: 26rpx;
					border-radius: 13rpx;
					background-color: #EE3F35;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 20rpx
				}
			}

			.textColor {
				color: #2A65A7;
			}

			.itembar0 {
				transition: all 0.4s;
				width: 33.3%;
				height: 4rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background-color: #2A65A7;
				border-radius: 2rpx;
			}

			.itembar1 {
				transition: all 0.4s;
				transform: translate(100%);
			}

			.itembar2 {
				transition: all 0.4s;
				transform: translate(200%);
			}
		}

		.content {
			padding-top: 40rpx;
			box-sizing: border-box;
			width: 100%;
			height: calc(100% - 280rpx);
			overflow: hidden;
			overflow-y: scroll;

			.contentItem {
				transition: all 0.5s;
				margin-bottom: 16rpx;
				background-color: #fff;
				width: 100%;
				height: 200rpx;
				padding-top: 20rpx;
				padding-left: 50rpx;
				padding-right: 50rpx;
				box-sizing: border-box;
				position: relative;

				.itemTitle {
					font-size: 34rpx;
				}

				.text {
					color: #A0A0A0;
					max-height: 80rpx;
					white-space: normal;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.readState {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #EE3F35;
				}

				.deleteBtn {
					width: 190rpx;
					height: 100%;
					color: #fff;
					background-color: #EE3F35;
					position: absolute;
					right: -200rpx;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.moveleft {
				transition: all 0.5s;
				transform: translateX(-200rpx);
			}
		}
	}
</style>